<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>JUL + YUI Example</title>
<style type="text/css">
	html, body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background-color: #fff;
	}
	body * {
		font-family:  "Helvetica",Helvetica, sans-serif;
		font-size: 13px;
	}
	#content {
		width: 960px;
		height: 580px;
		margin: 10px auto;
		padding: 15px 25px;
		text-align: center;
	}
	#footer {
		text-align: center;
		font-size: x-small;
	}
	.hidden {
		display: none;
	}
	#calendar-container {
		width: 97%;
		margin: 40px 0 40px 0;
	}
	#calendar-container table {
		margin: 0 auto;
	}
	#button-test {
		clear: both;
		display: block;
		margin: 10px 0;
	}
	#button-test button {
		width: 99%;
	}
</style>
<script type="text/javascript" src="../js/jul.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yuiloader/yuiloader-min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="content">
	<p>JUL example using <a target="_blank" href="http://yuilibrary.com/projects/yui2/">YUI</a> 
	to render the component tree.
	</p>
</div>
<div id="footer">
  <script type="text/javascript">
  document.write('Copyright &copy; 2012 - ' + (new Date()).getFullYear() + ' The Zonebuilder. Powered by JUL ' + JUL.version);
  </script>
</div>
<div id="dialog-main"></div>
<div id="datatable-json"></div>
<div class="hidden">
	<textarea id="editor-test"></textarea>
</div>
M<div id="calendar-container"></div>
<script>
(function() {
// configuring YUI Loader to load dependencies from CDN
var oLoader = new YAHOO.util.YUILoader({
    base: 'https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/',
	require: ['reset-fonts', 'container', 'button', 'tabview', 'datatable', 'editor', 'calendar'],
    loadOptional: true,
    // will fire APP.init method on loading complete
	onSuccess: function() { APP.init(); }
});
// application instance
APP = {
	version: '1.0',
	parser: new JUL.UI.Parser({
		// besides 'children', all these properties are also treated as (arrays of) component configs
		membersProperties: ['datasource', 'paginator'],
		// YUI needs a heavy custom factory to instabtiate a tree of component configs
		customFactory: function(oConfig) {
			var oComponent = null;
			// YUI constructors have a variable number of required arguments
			// some components need body initialization or complete rendering at initialization phase
			switch (oConfig.xclass) {
			case 'Dialog':
				oComponent = new YAHOO.widget.Dialog(oConfig.id, oConfig);
				oComponent.setHeader(oConfig.header || '');
				oComponent.setBody(oConfig.body || '');
				oComponent.render();
			break;
			case 'DataTable':
				oComponent = new YAHOO.widget.DataTable(oConfig.id, oConfig.columns, oConfig.datasource, oConfig);
			break;
			case 'DataSource':
				oComponent = new YAHOO.util.DataSource(oConfig.url, oConfig);
				oComponent.responseType = YAHOO.util.DataSource.TYPE_JSON;
			break;
			case 'Editor':
				oComponent = new YAHOO.widget.Editor(oConfig.id, oConfig);
				oComponent.render();
			break;
			case 'Calendar':
				oComponent = new YAHOO.widget.Calendar(oConfig.id, oConfig.container, oConfig);
				oComponent.render();
			break;
			default:
				oComponent = new YAHOO.widget[oConfig.xclass](oConfig);
			}
			// this part appends all children instances to the parent instance,
			// when this action isn't triggered by the YUI constrictor
			if (oConfig.children) {
				var aChildren = [].concat(oConfig.children);
				for (var i = 0; i < aChildren.length; i++) {
					switch (oConfig.xclass) {
					case 'Dialog':
						aChildren[i].appendTo(oComponent.form);
					break;
					case 'TabView':
						oComponent.addTab(aChildren[i]);
					break;
					case 'Tab':
						if (aChildren[i].oDomContainer) {
							oComponent.get('contentEl').appendChild(aChildren[i].oDomContainer);
						}
						else {
							aChildren[i].appendTo(oComponent.get('contentEl'));
						}
					break;
					default:
						aChildren[i].appendTo(oComponent);
					}
				}
			}
			// here we treat Element hierarchy listeners
			if (oConfig.listeners) {
				for (var sItem in oConfig.listeners) {
					oComponent.subscribe(sItem, oConfig.listeners[sItem], oComponent);
				}
			}
// these are Custom Events which have a different syntax of intercepting
			if (oConfig.events) {
				for (sItem in oConfig.events) {
					oComponent[sItem].subscribe(oConfig.events[sItem], oComponent);
				}
			}
			return oComponent;
		}
	}),
	// this method creates the UI tree
	init: function() {
		var oMain = this.parser.create(this.ui, this.logic);
		oMain.show();
	}
};
// layout configuration tree for the whole application
APP.ui = {
	xclass: 'Dialog',
	id: 'dialog-main',
	header: 'JUL + YUI Dialog',
	width: '700px',
	height: '450px',
	fixedcenter: true,
	postmethod: 'manual',
	children: [
		{xclass: 'TabView', children: [
			{xclass: 'Tab', label: 'DataTable', active: true, children: [
				{xclass: 'DataTable', id: 'datatable-json', columns: [
					{key: 'id', label: 'ID', sortable: true},
					{key: 'name', label: 'Name', width: 272, sortable: true},
					{key: 'date', label: 'Date', width: 110, sortable: true, formatter: 'date'},
					{key: 'price', label: 'Price', width: 90, sortable: true, formatter: 'currency'},
					{key: 'number', label: 'Number', width: 72, sortable: true, formatter: 'number'}
				], paginator: {
					xclass: 'Paginator', rowsPerPage: 10
				}}
			]},
			{xclass: 'Tab', label: 'Editor', children: [
				{xclass: 'Editor', id: 'editor-test', width: '670px', height: '188px', animate: true, dompath: true}
			]},
			{xclass: 'Tab', label: 'Calendar', children: [
				{xclass: 'Calendar', id: 'APP.calendar', container: 'calendar-container'},
				{xclass: 'Button', id: 'button-test', label: 'Show selected date'}
			]}
		]}
	]
};
// interface logic bounded by compoent IDs
APP.logic = {
	'dialog-main': {
		buttons: [
			{text: 'OK', isDefault: true, handler: function() { this.submit(); }},
			{text: 'Cancel', handler: function() { this.hide(); }}
		],
		events: {
			beforeHideEvent: function() {
				alert('Won\'t close for now.');
				return false;
			},
			beforeSubmitEvent: function() {
				alert('Please fill the required info!');
				return false;
			}
		}
	},
	'datatable-json': {
		datasource: {
			xclass: 'DataSource',
			url: '../data/data.json',
			responseSchema: {resultsList: 'records', fields: [
				{key: 'id', parser: 'number'}, 'name', {key: 'date', parser: 'date'},
				{key: 'price', parser: 'number'}, {key: 'number', parser: 'number'}
			]}
		},
		initialRequest: '?nc=' + (new Date()).getTime()
	},
	'button-test': {
		listeners: {
			click: function() {
				var aDates = APP.calendar.getSelectedDates();
				if (aDates.length) {
					alert(aDates[0].toLocaleString());
				}
				else {
					alert('Nothing selected!');
				}
			}
		}
	}
};
 // we call the loader to do the jobs of loading the dependencies, and of starting the application
 oLoader.insert();
})();
</script>
</body>
</html>
 